Vue.component('my-menu', {
    props: ['item'],
    methods: {
        showContent: function (e) {
            let href = e.currentTarget.dataset.href;
            let target = e.currentTarget.dataset.target;
            if (target === "_blank") {
                window.open(href);
            } else {
                // 改变当前url的值

                axios.get(href)
                    .then(function (response) {
                        content.content = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

                // 计算面包屑

                // 设置菜单选中效果

            }
        }
    },
    template:
        '<li class="nav-item" :class="{\'has-treeview\' : item.hasChildren, \'menu-open\': item.isOpen}">' +
        '   <a v-if="!item.hasChildren" href="javascript:;" @click="showContent" class="nav-link" :data-target="item.target" :data-href="item.href" :class="{\'active\' : item.isActive}">' +
        '       <i class="nav-icon" :class="[item.icon]"></i>' +
        '       <p>' +
        '           <span v-text="item.name" :title="item.name"></span>' +
        '       </p>' +
        '   </a>' +
        '   <a v-if="item.hasChildren" href="javascript:;" class="nav-link" :data-target="item.target" :data-href="item.href" :class="{\'active\' : item.isActive}">' +
        '       <i class="nav-icon" :class="[item.icon]"></i>' +
        '       <p>' +
        '           <span v-text="item.name" :title="item.name"></span>' +
        '           <i class="right fas fa-angle-left" v-if="item.hasChildren"></i>' +
        '       </p>' +
        '   </a>' +
        '   <ul v-if="item.hasChildren" class="nav nav-treeview">' +
        '       <my-menu v-for="item2 in item.children" :item="item2"></my-menu>' +
        '   </ul>' +
        '</li>'
});

var myMenu = new Vue({
    el: '#my-menu',
    data: {
        list: []
    },
    mounted: function () {
        let currentUrl = window.location.href;
        // 截取参数传递

        axios.get('/menus/')
            .then(function (response) {
                myMenu.list = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});

var content = new Vue({
    el: '.content',
    data: {
        content: ''
    }
});